<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head th:insert="~{page/head :: head}">

</head>


<body class="hold-transition skin-blue sidebar-mini">

<div class="wrapper">
    <!--修改模态框 出现的位置-->
    <style type="text/css">
        .modal.fade.in {
            top: 30%;
        }
    </style>

    <!--顶部导航栏-->
    <header th:insert="~{page/top_nav::top_nav}"></header>
    <!--左导航-->
    <aside th:insert="~{page/left_nav::left_nav}"></aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <section th:insert="~{page/dash::section_info('资源列表')}"></section>

        <!-- 信息 -->
        <section class="content">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">文件资源列表</h3>
                    <button class="pull-right btn btn-success" id="upload_btn">上传文件</button>
                </div>
                <div class="box-body">
                    <table id="example1" class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>资源名称</th>
                            <th>存储桶</th>

                            <th>资源大小</th>
                            <th>上传时间</th>
                            <th>操作</th>
                            <th>预览</th>
                        </tr>
                        </thead>
                        <tbody>

                        <tr th:each="file:${objectList}">

                            <td th:text="${file.objectName}">资源.pdf</td>

                            <td th:text="${file.bucketName}">文件
                            </td>
                            <td th:text="${file.objectSize}+MB">4MB</td>
                            <td th:text="${file.dataFormat()}">
                                2019/4/23 19:3
                            </td>
                            <td>
                                <div class="btn-group">

                                    <button type="button" class="btn " data-toggle="modal"
                                            th:onclick="javascript:downloadFile([[${file.bucketName}]],[[${file.getObjectName()}]])">
                                        <i class="glyphicon glyphicon-arrow-down"></i>
                                    </button>
                                    <button type="button" class="btn " data-toggle="modal" data-target="#file_remove"
                                            th:onclick="'javascript:removeFile(\''+${file.id}+'\')'">
                                        <i class="glyphicon glyphicon-remove"></i>
                                    </button>
                                    <button type="button" class="btn" id="shareFile"
                                            th:onclick="javascript:cutText([[${file.bucketName}]],[[${file.getObjectName()}]])"
                                    >
                                        <i class="glyphicon glyphicon-share-alt"></i>
                                    </button>
                                </div>
                            </td>
                            <td>
                                <a type="button" class="btn  btn-block btn-info" target="_blank"
                                   th:href="@{'/file/preview/'+${file.getId()}}">预览</a>
                            </td>

                        </tr>
                        </tbody>

                    </table>


                </div>
            </div>
        </section>
    </div>

</div>

<div style="display: none" id="cutText" data-clipboard-text="aa"></div>
</body>

<div th:insert="~{page/js_content :: jsContent}"></div>
<!-- DataTables -->
<script src="/static/admin/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/admin/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- AdminLTE for demo purposes -->
<!-- <script src="dist/js/demo.js"></script> -->
<!-- page script -->
<!-- 剪切板js文件 -->
<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<script>
    $(function () {
        $('#example1').DataTable()
        $('#example2').DataTable({
            'paging': true,
            'lengthChange': false,
            'searching': false,
            'ordering': true,
            'info': true,
            'autoWidth': false
        })
    })

    $("#upload_btn").click(
        function () {
            layer.open({
                type: 2,
                title: '文件上传',
                shadeClose: true,
                shade: 0.8,
                area: ['500px', '500px'],
                content: '/fileUpload/',
                end: function () {
                    window.parent.location.reload()
                }
            });

        }
    )


</script>

<script>

    function downloadFile(bucketName, fileName) {

        layer.confirm('确认下载？', {
            btn: ['取消', '确认'] //按钮
        }, function () {
            layer.msg('取消操作', {icon: 2});
        }, function () {
            window.open("/file/download/" + bucketName + "/" + fileName, "_blank");
        });
    }

    function removeFile(id) {
        layer.confirm('确认删除？', {
            btn: ['取消', '确认'] //按钮
        }, function () {
            layer.msg('取消操作', {icon: 2});
        }, function () {
            $.ajax({
                type: 'POST',
                url: "/file/delete/",
                data: {
                    "id": id
                },
                success: function (data) {
                    layer.alert(data["info"], {
                        skin: 'layui-layer-molv',
                        closeBtn: 0,
                        end: function () {
                            window.parent.location.reload()
                        }
                    })
                },
                error: function () {
                    alert("删除失败");
                }
            })
        });
    }

    function cutText(bucketName, fileName) {
        const message = window.location.protocol + "//" + window.location.host + "/file/download/" + bucketName + "/" + fileName;
        prompt("请使用Ctrl+c 复制下面的网址", message);

    }
</script>

</html>